<script setup>
    import { ref, onMounted } from 'vue';
    import axios from 'axios'
    import { findAll, seachUser } from '@/api/Article'


    const dataList = ref([]);
    const user = ref({ userName: '', age: '' });
    const seachUser1 = async function () {
        const data = await seachUser(user.value);
        dataList.value = data.data;
    }

    const findAll1 = async function () {
        const data = await findAll();
        dataList.value = data.data;
    }
    findAll1();
</script>

<template>
    <div id="app">

        用户名: <input type="text" v-model="user.userName">
        年龄: <input type="text" v-model="user.age">

        <button @click="seachUser1">搜索</button>

        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>用户名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>角色</th>
                <th>创建时间</th>
                <th>创建人</th>
                <th>修改时间</th>
                <th>修改人</th>
            </tr>
            <tr v-for="data in dataList">
                <td>{{data.userName}}</td>
                <td>{{data.age}}</td>
                <td>{{data.sex}}</td>
                <td>{{data.roleId}}</td>
                <td>{{data.createTime}}</td>
                <td>{{data.createBy}}</td>
                <td>{{data.updateTime}}</td>
                <td>{{data.updateBy}}</td>

                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>
</template>